<template>
  <div class="page">
    <div class="banner" >
      <img :src="banner_path"  />
    </div>
    <div class="touch-long"  v-on:touchstart="touch_start(0)" v-on:touchend="touch_end(0)" @clik="close_badge_show(0)">
      <grid :show-lr-borders="false" :show-vertical-dividers="false" :cols="4" >
        <grid-item :label="item.category_name" v-for="item in list_cate" @on-item-click="delete_cate(item.id)" v-if="badge_show">
          <badge text="X" v-show="badge_show"></badge>
          <img slot="icon" :src="domain + item.icon">
        </grid-item>
        <grid-item :label="item.category_name" @on-item-click="show_level(item.id, item.category_name)" v-else>
          <img slot="icon" :src="domain + item.icon">
        </grid-item>
        <grid-item label="增加" @on-item-click="add(1)" v-show="is_sys" class="borderradius">
          <img slot="icon" src="../assets/add.png">
        </grid-item>
      </grid>
    </div>
    <div v-transfer-dom class="dialog-show">
    <x-dialog hide-on-blur v-model="show">
      <div class="" v-on:touchstart="touch_start(1)" v-on:touchend="touch_end(1)" @click="close_badge_show(1)">
        <divider>{{level_title}}</divider>
        <grid :show-lr-borders="false" :show-vertical-dividers="false" :cols="4">
          <grid-item :label="item.name" v-for="item in list_show_level" @on-item-click="delete_mirco(item.agent_id)" v-if="badge_show_le" >
            <badge text="X" v-show="badge_show_le"></badge>
            <img slot="icon" :src="item.app_icon">
          </grid-item>
          <grid-item :label="item.name" @on-item-click="open_url(item.homepage_link)" v-else >
            <badge text="X" v-show="badge_show_le"></badge>
            <img slot="icon" :src="item.app_icon">
          </grid-item>
          <grid-item label="增加" @on-item-click="add(2)">
            <img slot="icon" src="../assets/add.png">
          </grid-item>

        </grid>
      </div>

    </x-dialog>
    <x-dialog hide-on-blur v-model="le_show" @on-hide="hide_show">
      <divider>新增应用</divider>
      <grid :show-lr-borders="false" :show-vertical-dividers="false" :cols="4">
        <grid-item :label="item.name" v-for="item in list_show_level_add" @on-item-click="select_level(item.agent_id, item.app_icon)">
          <img slot="icon" :src="item.app_icon">
        </grid-item>

      </grid>
    </x-dialog>
    <x-dialog hide-on-blur v-model="add_show">
      <divider>新增类别</divider>
      <group class="paddings">
        <x-input title="名称" v-model="category_name"></x-input>
        <div class="vux-x-input weui-cell">
          <div class="weui-cell__hd">
            <label for="vux-x-input-gl2fq" class="weui-label" style="width: 3em;">图标</label>
          </div>
          <div class="weui-cell__bd weui-cell__primary">
			<x-button mini type="default" @click.native="upload_file">选择图片</x-button>
            <!-- <input accept="image/*" @change="check_file($event)" :value="files" type="file" class="weui-input">-->
          </div>
        </div>
        <x-button mini type="warn" @click.native="add_cate">提交</x-button>
      </group>
    </x-dialog>
    </div>

    <loading :show="loading" text="loading"></loading>
    <toast v-model="toast" type="text">{{toastText}}</toast>
  </div>
</template>

<script>
import { Grid, GridItem, XDialog, Divider, Card, TransferDomDirective as TransferDom, Badge, Alert, Loading ,Toast, XInput, Group, XButton } from 'vux'
import { GetUser, GetCategory, GetMicro, addMicro, deleteMicro, deleteCate, addCate } from '../api'


export default {
  name: 'Index',
  components: {
    Grid, GridItem, XDialog, Divider, Card, Badge, Loading ,Toast, XInput, Group, XButton
  },
  directives: {
    TransferDom
  },
  data() {
    return {
      domain: 'https://api.sikutech.com',
      banner_path: '../assets/banner.jpg',
      loading: false,
      toast: false,
      toastText: '',
      touch_time: 0,
      touch_time_le: 0,
      touch_time_fac: 0,
      show: false,
      le_show: false,
      badge_show: false,
      badge_show_le: false,
      user: {},
      list_cate: {},
      is_sys: false,
      list_show_level: 3,
      level_title: '',
      list_show_level_add: {},
      category_id: 0,
      add_show: false,
      category_name: '',
      formData: '',
      files: ''
    }
  },
  created(){
    let that = this
    this.get_cate()
    this.getUserInfo()

  },
  methods: {
	open_url: function(url){
		dd.biz.util.openLink({
			url:url,//要打开链接的地址
			onSuccess : function(result) {
				/**/
			},
			onFail : function(err) {}
		})
	},
	upload_file: function() {
		dd.ready(function(){
			
		})
		let that = this
		dd.biz.util.uploadImage({
			compression:true,//(是否压缩，默认为true)
			multiple: false, //是否多选，默认false
			max: 1, //最多可选个数
			quality: 50, // 图片压缩质量, 
			resize: 50, // 图片缩放率
			onSuccess : function(result) {
				//onSuccess将在图片上传成功之后调用
				console.log(result)
				addCate({category_name: that.category_name, user_id:that.user.userid, icon_path: result[0]}, that).then(res=>{
					that.toastText = '增加成功！'
					that.toast = true
					that.get_cate()
					that.add_show = false
				})
			},
			onFail : function(err) {}
		})
	},
    badge_show_leccc: function(){
      this.badge_show_le = !this.badge_show_le
    },
    badge_showccc: function() {
      this.badge_show = !this.badge_show
    },
    get_cate: function() {
      GetCategory({}, this).then(res=>{
        this.list_cate = res.category_list
        this.banner_path = this.domain+res.banner_path
      })
    },
    add_cate: function() {
      if(this.formData.length == '') {
        this.toastText = '请上传图片'
        this.toast = true
        return
      }
      if(this.category_name == '') {
        this.toastText = '请填写名称'
        this.toast = true
        return
      }
      this.formData.append('category_name', this.category_name)
      this.formData.append('user_id', this.user.userid)
      addCate(this.formData, this).then(res=>{
        this.toastText = '增加成功！'
        this.toast = true
        this.get_cate()
        this.add_show = false
      })
    },
    check_file: function(e) {
      let deviceFile = e.target.files;
      console.log(deviceFile[0].size)
      if(deviceFile[0].size > 110207) {
        this.toastText = '图标不超过100K'
        this.toast = true
        return
      }
      this.formData = new FormData();
      this.formData.append('icon_path', deviceFile[0])

    },
    delete_cate: function(id) {
      deleteCate({user_id: this.user.userid, category_id: id}, this).then(res=>{
        this.toastText = '删除成功！'
        this.toast = true
        this._delete_cate(id)
        this.close_badge_show(0)
      })
    },
    delete_mirco: function(id) {
      if(!this.badge_show_le)return
      deleteMicro({user_id: this.user.userid, agent_id:id}, this).then(res=>{
        this.toastText = '删除成功！'
        this.toast = true
        this._delete_mirco_(id)
      })
    },
    select_level: function(id, icon_path) {
      addMicro({user_id: this.user.userid, agent_id: id, category_id: this.category_id, icon_path:icon_path}, this).then(res=>{
        this.toastText = '增加成功！'
        this.toast = true
      })
    },
    hide_show: function() {
      GetMicro({category_id: this.category_id, user_id: this.user.userid}, this).then(res=>{
        this.list_show_level = res
      })
    },
    add: function(type){
      if(type == 1)
      {
        if(!this.is_sys)return
        this.category_name = ''
        this.files = ''
        this.add_show = !this.add_show
      }else {
        this.show_level(0)

      }
    },
    show_level: function(id, name = '')
    {
      this.badge_show_le = false
      if(name != '') {
        this.level_title = name
      }
      GetMicro({category_id:id, user_id: this.user.userid}, this).then(res=>{
        if(id != 0) {
          for(var i in res) {
            res[i]['homepage_links'] = res[i]['homepage_link']
          }
          this.list_show_level = res
          this.show = true
          this.category_id = id
        }else{
          this.list_show_level_add = res
          this.le_show = true
        }


      })
    },
    getUserInfo: function(){
      let that = this
      dd.ready(function(){
        dd.runtime.permission.requestAuthCode({
            //corpId: "ding3901f11eb913a59735c2f4657eb6378f",
            corpId: "dinge55ad6668bf5dad635c2f4657eb6378f",
            onSuccess: function(result) {
              GetUser({code: result.code}, that).then(res=>{
                //res.is_sys = false
                that.user = res
                that.is_sys = res.is_sys
                console.log(res)
              })
            },
            onFail : function(err) {}
        })
      })
    },
    touch_start: function(type){
      let that = this
      this.touch_time_fac = setTimeout(function(){
        if(type == 1) {
          that.touch_time_le += 1
          if(that.touch_time_le>1)this.badge_show_le = true
        }else {
          if(that.is_sys) {
            that.touch_time += 1
            if(that.touch_time>1)this.badge_show = true
          }
        }

      }, 1000)
      console.log(this.touch_time)
    },
    touch_end: function(type){
      clearTimeout(this.touch_time_fac)
      if(type == 1) {
        if(this.touch_time_le > 0)
        {
          this.touch_time_le = 0
          this.badge_show_le = true
        }
      }else {
        if(!this.is_sys)return;

        if(this.touch_time >= 1)
        {
          this.touch_time = 0
          this.badge_show = true
        }else {
          //this.close_badge_show(0)
        }
      }
    },
    close_badge_show: function(type){
      if(type == 1) {
        if(this.badge_show_le)this.badge_show_le = false
      }else {
        if(this.badge_show)this.badge_show = false
      }

    },
    _delete_mirco_: function(id) {
      GetMicro({category_id: this.category_id, user_id: this.user.userid}, this).then(res=>{
        this.list_show_level = res
      })
      /*
      let list = [];
      for(var i in this.list_show_level) {
        if(this.list_show_level[i]['agent_id'] != id) {
          list[i] = this.list_show_level[i]
        }
      }
      console.log(list)
      this.list_show_level = list*/
    },
    _delete_cate: function(id) {
      this.get_cate()
      /*
      let list = [];
      for(var i in this.list_cate) {
        if(this.list_cate[i]['id'] != id) {
          list[i] = this.list_cate[i]
        }
      }
      this.list_cate = list*/
    }
  }
}
</script>
<style lang="less" scoped>
@import '~vux/src/styles/close';
@media screen and (min-width: 1024px) {
  .weui-dialog {
    width: 35%;
  }
}
.vux-close {
    margin-top: 8px;
    margin-bottom: 8px;
  }
</style>
